<template>
    <div>
        <el-row>
            <el-form :inline="true">
                <el-col :span="8">
                    <el-form-item label="入库单据号">
                        <el-input v-model="orderParam.inboundDonumber" placeholder="请输入" style="width:107%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入库方式">
                        <el-select v-model="orderParam.inboundMethod" placeholder="请选择">
                            <el-option v-for="InboundMethod in InboundMethodDate" :key="InboundMethod.id"
                                :label="InboundMethod.name" :value="InboundMethod.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="生产厂家">
                        <el-select v-model="orderParam.manufacturer" placeholder="请选择">
                            <el-option v-for="Manufacturer in DictManufacturerDate" :key="Manufacturer.id"
                                :label="Manufacturer.name" :value="Manufacturer.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-row>
            <el-form :inline="true">
                <el-col :span="8">
                    <el-form-item label="审核状态">
                        <el-select v-model="orderParam.status" placeholder="请选择">
                            <el-option label="待审核" value="2"></el-option>
                            <el-option label="已审核" value="1"></el-option>
                            <el-option label="审核驳回" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="登记时间">
                        <el-date-picker v-model="orderParam.registTime" type="date" placeholder="选择日期时间"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <el-row>
            <el-col class="align-right">
                <el-form :inline="true">
                    <el-form-item>
                        <el-button @click="clear">重置</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="queryMaterialStorage">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row>
            <el-col>
                <el-button type="primary" @click="addMaterialStorage">新增入库</el-button>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <!-- 放表格数据 -->
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="80">
                    </el-table-column>
                    <el-table-column prop="inboundDonumber" label="入库单据号" width="150">
                    </el-table-column>
                    <el-table-column prop="inboundMethodName" label="入库方式" width="150">
                    </el-table-column>
                    <el-table-column prop="purchaser" label="采购人">
                    </el-table-column>
                    <el-table-column prop="purchasePrice" label="采购价">
                    </el-table-column>
                    <el-table-column prop="manufacturerName" label="生产厂商" width="200">
                    </el-table-column>
                    <el-table-column prop="registrants" label="登记人" width="200">
                    </el-table-column>
                    <el-table-column prop="registTime" label="登记时间" width="180">
                    </el-table-column>
                    <el-table-column fixed="right" prop="status" label="启动状态" width="80">
                        <template slot-scope="scope">
                            <span :style="{
                color: scope.row.status === 0 ? 'red' :
                    scope.row.status === 1 ? 'green' :
                        scope.row.status === 2 ? 'blue' : ''
            }">
                                {{
                scope.row.status === 0 ? '审批驳回' :
                    scope.row.status === 1 ? '已审批' :
                        scope.row.status === 2 ? '待审批' : ''
            }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="120">
                        <template slot-scope="scope">
                            <template v-if="scope.row.status === 0">
                                <el-button type="text" size="small" style="color: blue;"
                                    @click="update(scope.row.id)">编辑</el-button>
                                <el-button type="text" size="small" style="color: red;"
                                    @click="del(scope.row.id)">删除</el-button>
                            </template>
                            <template v-else-if="scope.row.status === 1">
                                <el-button type="text" size="small" style="color: green;"
                                    @click="redirectToDetails(scope.row.id)">查看详情</el-button>
                            </template>
                            <template v-else>
                                <el-button type="text" size="small" style="color: blue;"
                                    @click="audit(scope.row.id)">审核</el-button>
                                <el-button type="text" size="small" style="color: red;"
                                    @click="del(scope.row.id)">删除</el-button>
                            </template>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <!-- 放分页部分 -->
                <el-pagination background :page-sizes="[3, 5, 10, 20]" :page-size="pageSize" :current-page="pageNum"
                    layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
                    @size-change="sizeChange" @current-change="currentPage" :total="total"></el-pagination>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            pageNum: 1,
            pageSize: 5,
            total: 0,
            orderParam: {
                inboundDonumber: '',
                inboundMethod: '',
                manufacturer: '',
                status: '',
                registTime: ''
            },
            tableData: [

            ],
            DictManufacturerDate: [ //生产厂家

            ],
            InboundMethodDate: [ //入库方式

            ],
            employee: {},
            account: '',
            authCode: ''
        };
    },
    methods: {
        clear() {
            this.orderParam = {};
        },
        prevPage(val) {
            //点击上一页触发
            this.pageNum = val;
            this.queryMaterialStorage();
        },
        nextPage(val) {
            //点击下一页触发
            this.pageNum = val;
            this.queryMaterialStorage();
        },
        sizeChange(val) {
            //val每一页条数
            this.pageNum = 1;
            this.pageSize = val;
            this.queryMaterialStorage();
        },
        currentPage(val) {
            this.pageNum = val;
            this.queryMaterialStorage();
        },
        queryCondition() {
            this.pageNum = 1;
            this.queryMaterialStorage();
        },
        queryMaterialStorage() {
            //带分页参数pageNum,pageSize
            let pageParam = {};
            pageParam.pageNum = this.pageNum;
            pageParam.pageSize = this.pageSize;
            pageParam.param = this.orderParam;
            this.$axios.post("api/material/queryMaterialStorage", pageParam).then(res => {
                if (res.data.code == 200) {
                    let pageData = res.data.data;
                    this.tableData = pageData.list;
                    //给分页参数赋值
                    this.total = pageData.total;
                    this.pageNum = pageData.pageNum;
                    this.pageSize = pageData.pageSize;

                } else {
                    this.$router.push({ path: "/login" });
                }
            });
        },
        //查询生产厂家
        queryManufacturer() {
            this.$axios.get('api/dict/queryDict/' + 13)
                .then(res => {
                    if (res.data.code == 200) {
                        this.DictManufacturerDate = res.data.data
                    }
                })
        },
        //查询入库方式
        queryInboundMethod() {
            this.$axios.get('api/dict/queryDict/' + 42)
                .then(res => {
                    if (res.data.code == 200) {
                        this.InboundMethodDate = res.data.data
                    }
                })
        },
        addMaterialStorage() {
            this.$router.push({ path: '/addMaterialStorage' })
        },
        del(val) {
            this.$confirm('确认删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //发删除请求
                this.$axios.get('api/materialStorage/deleteMaterialStorage/' + val)
                    .then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.queryMaterialStorage();
                        }
                    })
            }).catch(() => {
                // 用户取消确认，不需要执行任何操作
            });
        },
        redirectToDetails(val) {
            this.$router.push({ path: '/materialStorageInfo', query: { id: val } });
        },
        audit(val) {
            if (this.authCode != 7) {
                this.$message({
                    type: 'error',
                    message: '权限不足!'
                });
                return;
            }
            this.$router.push({ path: '/materialStorageAudit', query: { id: val } });
        },
        update(val) {
            this.$router.push({ path: '/editMaterialStorage', query: { id: val } });
        },

        //获取当前登录人
        queryEmployee() {
            this.$axios.get('api/employee/queryOperator')
                .then(res => {
                    this.employee = res.data.data
                    this.account = this.employee.account
                    this.queryEmployeeAuth();
                })
        },
        //获取当前登录人权限
        queryEmployeeAuth() {
            this.$axios.get('api/nursing/queryEmployeeByAccount/' + this.account)
                .then(res => {
                    this.authCode = res.data.data.authCode
                })
        },
    },
    created() {
        this.queryMaterialStorage();
        this.queryInboundMethod();
        this.queryManufacturer();
        this.queryEmployee();
    }
};
</script>

<style scoped>
.align-right {
    display: flex;
    justify-content: flex-end;
}
</style>